<template>
	<view>
		<!-- 操作菜单 -->
		<uni-popup ref="popup" type="bottom">
			<view class="actionsheet_warp">
				<view class="_item title" @click="change({value: 0})">
					{{title}}
				</view>
				<view class="_item" @click="change(item)" :class="{'bot': index == 0}" v-for="(item, index) in list" :key="index">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "com-actionsheet-menu",
		props: {
			title: {
				type: String,
				default: '性别'
			},
			popType: {
				type: String | Number,
				default: 1
			}
		},
		data() {
			return {
				list: [
					{
						name: '男',
						value: '1'
					},
					{
						name: '女',
						value: '2'
					}
				]

			};
		},
		mounted() {
			console.log(this.popType)
			if(this.popType == 2) {
				this.list = [
					{
						name: '拍照',
						value: '1'
					},
					{
						name: '取消',
						value: '2'
					}
				]
			}
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			change(item) {
				if(item.value == 0 && this.popType == 1) {
					return;
				}
				this.$refs.popup.close()
				this.$emit('actionsChange', {
					data: item
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.actionsheet_warp {
		margin: 0 auto;
		width: 691rpx;
		border-radius: 24rpx 24rpx 0 0;
		background: #39354B;
		overflow: hidden;
		
		.title {
			border: 1px solid rgba(229,221,255,0.1);
		}

		._item {
			background: #28243D;
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F1EDFF;
			text-align: center;
			
			&.bot {
			   margin-bottom: 16rpx;	
			}
		}
	}
</style>
